<script lang="ts" setup name="Branch">
import { CirclePlus, Delete } from '@element-plus/icons-vue'
import { cloneDeep } from 'lodash-es'
import { ProTableInstance } from '~/library/components/ProTable/interface'
import { addBrandAPI, deleteBrandAPI, editBrandAPI, getBranchAPI } from '~/src/api/goods'
import { Information } from '~/src/api/interface/information'
import { brandColumns } from '../columns/brandColumns'
import BrandDialog from './BrandDialog.vue'
const tableRef = ref<ProTableInstance>()

const onDelete = async (type: string | number) => {
  if (type !== 'all') {
    await useHandleData(deleteBrandAPI, { id: type }, `删除【${type}】品牌资料`)
    tableRef.value?.getTableList()
    return
  }
  const ids: any = tableRef.value?.selectedListIds
  if (!ids.length)
    return ElMessage({
      message: '当前未选中',
      type: 'error',
    })
  await useHandleData(deleteBrandAPI, { id: ids }, '删除选中品牌资料')
  tableRef.value?.getTableList()
}

const brandDialogRef = ref<InstanceType<typeof BrandDialog>>()

const openDialog = (title: string, row?: Information.BrandList) => {
  brandDialogRef.value?.acceptParams({
    isView: false,
    row: row ? cloneDeep(row) : { name: '', isShow: false },
    title,
    api: row ? editBrandAPI : addBrandAPI,
    getTableList: tableRef.value?.getTableList,
  })
}
</script>

<template>
  <div class="default-table-container auto-height-container">
    <div class="table-box height100">
      <pro-table
        ref="tableRef"
        :columns="brandColumns"
        :isCard="false"
        :pagination="false"
        :request-api="getBranchAPI"
        row-key="id"
        title="商品分类列表"
      >
        <template #tableHeader>
          <el-button :icon="CirclePlus" type="primary" @click="openDialog('新增')">新增品牌</el-button>
          <el-button :icon="Delete" type="primary" @click="onDelete('all')">删除</el-button>
        </template>
        <template #operation="{ row }">
          <el-button link type="primary" @click.stop="onDelete(row.id)">删除</el-button>
        </template>
        <template #name="{ row }">
          <el-button link type="primary" @click.stop="openDialog('编辑', row)">{{ row.name }}</el-button>
        </template>
        <template #isShow="{ row }">
          <el-switch v-model="row.isShow" disabled />
        </template>
      </pro-table>
    </div>
    <brand-dialog ref="brandDialogRef" />
  </div>
</template>

<style lang="scss" scoped></style>
